<template>
	<view class="container">
		<view class="form-box">
			<view class="form-item">
				<view class="label">
					姓名
				</view>
				<view class="form-content">
					<view class="input-box">
						<input type="text" placeholder="请输入姓名" placeholder-class="pla-class" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					职位
				</view>
				<view class="form-content">
					<view class="input-box">
						<input type="text" placeholder="请输入职位" placeholder-class="pla-class" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					手机号
				</view>
				<view class="form-content">
					<view class="input-box">
						<input type="text" placeholder="请输入手机号" placeholder-class="pla-class" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					验证码
				</view>
				<view class="form-content">
					<view class="input-box getcode">
						<input type="text" placeholder="请输入短信验证码" placeholder-class="pla-class" />
						<view class="btn">获取验证码</view>
					</view>
				</view>
			</view>
			<view class="form-item" style="flex-direction: column;border: none;padding: 20rpx 0 0;">
				<view class="label" style="padding-left: 24rpx;">
					设置权限
				</view>
				<view class="form-content" style="width: 100%;">
					<view class="switch-list">
						<view class="s-item" :class="item.text=='销售订单'||item.text=='咨询电话' ? 'n-border' : ''" v-for="(item,i) in roleList" :key="i">
							<text>{{item.text}}</text>
							<switch checked="true" @change="switchChange($event,item)" />
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-btn" v-if="false">
				<button>确认添加</button>
			</view>
			<view class="bottom-btn edit" v-if="true">
				<button>删除</button>
				<button>保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roleList:[
					{
						text:'我的二维码',
						prop:'qrcode'
					},
					{
						text:'我的收益',
						prop:'qrcode'
					},
					{
						text:'我的用户',
						prop:'qrcode'
					},{
						text:'数据统计',
						prop:'qrcode'
					},{
						text:'销售订单',
						prop:'qrcode'
					},{
						text:'社区代理',
						prop:'qrcode'
					},{
						text:'服务管理',
						prop:'qrcode'
					},{
						text:'员工管理',
						prop:'qrcode'
					},{
						text:'限时冻结',
						prop:'qrcode'
					},{
						text:'服务者审核',
						prop:'qrcode'
					},{
						text:'证书审核',
						prop:'qrcode'
					},{
						text:'调度中心',
						prop:'qrcode'
					},{
						text:'咨询电话',
						prop:'qrcode'
					},{
						text:'企业微信群',
						prop:'qrcode'
					},{
						text:'银行卡管理',
						prop:'qrcode'
					},{
						text:'大客户管理',
						prop:'qrcode'
					},{
						text:'护理员审核',
						prop:'qrcode'
					},
				]
			};
		},
		
		methods:{
			switchChange($event,item){
				console.log($event,item,'---')
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	.form-box{
		padding: 12rpx 0 0;
		.form-item{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 22rpx 22rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #EEEEEE;
			// &>view{
			// 	flex: auto;
			// }
			.label{
				width: 140rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.form-content{
				width: calc(100% - 140rpx);
				/deep/ .pla-class{
					font-weight: 400;
					font-size: 32rpx;
					color: #B4B4B4;
					line-height: 44rpx;
				}
				.input-box{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					input{
						flex: auto;
						text-align: right;
					}
					
					.btn{
						// width: 146rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #E72A2A;
						line-height: 44rpx;
						margin-left: 20rpx;
					}
				}
				
				.switch-list{
					display: flex;
					flex-wrap: wrap;
					padding-top: 14rpx;
					&>view{
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2rpx solid #EEEEEE;
						padding: 24rpx 22rpx 26rpx 24rpx;
						box-sizing: border-box;
						&:nth-child(2n + 1){
							border-right: 2rpx solid #EEEEEE;
						}
						&.n-border{
							border-right: 0;
						}
					}
				}
			}
		}
		
		.bottom-btn{
			padding: 42rpx 22rpx 0;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
			
			&.edit{
				display: flex;
				justify-content: space-between;
				button{
					width: 300rpx;
					height: 96rpx;
					border-radius: 80rpx;
					background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
					&:nth-child(1){
						background: #FF4A4A;
					}
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
				}
			}
		}
	}
}
</style>
